<article class="module-account module-account-guojing">
  <div class="ui-account-box">
    <div class="account-box">
      <div class="guojing-logo">
        <a href="javascript:;">
          <img src="../../../img/icon-jing-bg.png" alt="">
        </a>
        <p>国际期货（香港）证券与期货有限公司是获得中华人民共和国香港特别行政区证监会直接发牌、直接监管的持牌法团， 持有经营证券与期货交易的受规管业务牌照（中央编号：BAV573）。公司管理团队拥有超过20年国内和香港金融业从业经历， 秉持「坚守道德、合规发展、专业服务、公平交易、高效受理」的经营理念，恪尽职守呵护客户的财富，不负客户托付。</p>
        <p>公司也是香港联合交易所参与者，已建成完善、高效的港股壹站式证券与期货交易的金融服务网络， 专注于提供港股等海外市场交易服务。 </p>
      </div>
      <div class="guojing-binding" v-if="!binDing">
        <h3>{{$t('guojing.binAccount')}}</h3>
        <div class="form">
          <p>
            <label>{{$t('guojing.bingdingUser')}}</label>
            <input type="text" name="username" v-model="binDingUserName" :placeholder="$t('guojing.bingdingUserTip')">
            <span></span>
          </p>
          <p>
            <label>{{$t('guojing.bingdingUserPwd')}}</label>
            <input type="password" v-model="binDingPassWord" name="password" :placeholder="$t('guojing.bingdingUserPwdTip')">
            <span></span>
          </p>
          <p class="last">
            <button v-if="!isLoadingb" @click="binDingSubmit">{{$t('guojing.binding')}}</button>
            <button v-if="isLoadingb" style="background: #7bc1fa">{{$t('guojing.binding')}}...</button>
          </p>
        </div>
      </div>
      <div class="guojing-transfer" v-if="binDing">
        <h3>{{$t('guojing.Currency')}}</h3>
        <div class="form">
          <p>
            <label>{{$t('guojing.type')}}</label>
            <a class="active" href="javascript:;">APA</a>
            <span></span>
          </p>
          <p>
            <label>{{$t('guojing.TransferNumber')}}</label>
            <input type="text" name="moneyNumber" v-model="amount" :placeholder="$t('guojing.TransferNumberTip')">
            <span></span>
          </p>
          <p>
            <label>{{$t('guojing.PayPassword')}}</label>
            <input type="password" name="smartPassword" v-model="payPassword" :placeholder="$t('guojing.PayPasswordTip')">
            <span></span>
          </p>
          <p class="last">
            <button v-if="!isLoadings" @click="Deposit">{{$t('guojing.confirm')}}</button>
            <button v-if="isLoadings" style="background: #7bc1fa">{{$t('guojing.loading')}}...</button>
            <!-- <button class="noBg">{{$t('guojing.cancel')}}</button> -->
          </p>
        </div>
        <h3 style="margin-bottom: 0; border:0;">{{$t('guojing.record')}}</h3>
        <div class="table-wrap">
          <div class="m-table">
            <table>
              <thead>
                <tr>
                  <th width="20%">{{$t('guojing.time')}}</th>
                  <th width="30%">{{$t('guojing.number')}}</th>
                  <th width="30%">{{$t('guojing.FlowTo')}}</th>
                  <th width="20%" class="fn-ta-right">{{$t('guojing.tradeType')}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list" v-if="isLoading === false && list.length > 0">
                  <td>{{timezone(item.tradeTime)}}</td>
                  <td>{{item.amount}}</td>
                  <td>{{$t('guojing.'+item.tradeType)}}</td>
                  <td class="fn-ta-right">
                    <span class="fn-green" v-if="item.tradeTypeInfo === 'SUCCESS'">{{ $t('asset.common.completed') }}</span>
                    <span class="fn-red" v-if="item.tradeTypeInfo === 'ERROR'">{{ $t('asset.common.failed') }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <loading v-if="isLoading"></loading>
            <no-data v-if="isLoading === false && list && list.length === 0"></no-data>
          </div>
          <pager :page-no="pageNo" :page-size="pageSize" :on-page-change="changePage" :page-num="pageNum"></pager>
        </div>
      </div>
    </div>
  </div>
</article>